<template>
  <div class="bg-style">
    <i-pageBody class="add_color">
      <div slot="page-main">
        <div class="container">
          <div style="display: flex">
                <div class="part-common" style="width: 350px;">
                  <div class="container-title">
                    <div class="icon"></div>系统概况
                  </div>
                  <div class="container-content" >
                    <div
                      class="content-item"
                      v-for="(item,index) in systemData"
                      :key="item.name+index"
                    >
                      <div
                        class="item-icon"
                        :style="{background:`url(${item.url}) no-repeat center  / contain`}"
                      ></div>
                      <div class="item-describe">
                        <div>{{item.name}}</div>
                        <div>{{item.value | noDataFormat}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="part-common" style="flex: 1">
                  <div class="container-title">
                    <div class="icon"></div>当日总电负荷功率曲线
                  </div>
                  <div id="centerAirEchart" class="container-content" style="margin-top:20px;"></div>
                </div>
          </div>
          <div class="air-system">
            <div class="container-title">
              <div class="icon"></div>中央空调系统图
            </div>
            <div v-if="systemArr.length>0" class="legend">
              <div>
                <img src="../../../../assets/img/centerAir/3.png" height="30" width="30" />
                <div>空调主机</div>
              </div>
              <div>
                <img src="../../../../assets/img/centerAir/2.png" height="30" width="30" />
                <div>空调</div>
              </div>
            </div>
            <div  v-if="systemArr.length>0" class="system-box">
              <div  class="box-item"
                   v-for="(item,index) in systemArr" :key="index">
                <div class="air-pipe">
                  <div class="icon"></div>
                  <div class="direction">
                    <div class="left">
                      <div>
                        <div>供水温度：</div>
                        <div>{{item.gswd | noDataFormat}}℃</div>
                      </div>
                      <div>
                        <div>回水温度：</div>
                        <div>{{item.hswd | noDataFormat}}℃</div>
                      </div>
                      <div>
                        <div>进水压力：</div>
                        <div>{{item.jsyl | noDataFormat}}kPa</div>
                      </div>
                      <div>
                        <div>出水压力：</div>
                        <div>{{item.csyl | noDataFormat}}kPa</div>
                      </div>
                      <div>
                        <div>实时频率：</div>
                        <div>{{item.sspl| noDataFormat}}Hz</div>
                      </div>
                      <div>
                        <div>用电功率：</div>
                        <div>{{item.ydgl| noDataFormat}}kW</div>
                      </div>
                      <div>
                        <div>启停状态：</div>
                        <div>{{item.qtzt| noDataFormat}}</div>
                      </div>
                      <div>
                        <div>工作效率：</div>
                        <div>{{item.gzxl| noDataFormat}}%</div>
                      </div>
                    </div>
                    <img src="../../../../assets/img/centerAir/8.png" height="205" width="11" />
                    <div class="right">
                      <div>空调管网</div>
                      <div class="details">
                        <div>
                          <div>温度：</div>
                          <div>{{item.ggwd | noDataFormat}}℃</div>
                        </div>
                        <div>
                          <div>流量：</div>
                          <div>{{item.ggll | noDataFormat}}t/h</div>
                        </div>
                        <div>
                          <div>压力：</div>
                          <div>{{item.ggyl | noDataFormat}}kPa</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="air-end">
                  <div class="left">
                    <div
                      v-for="(airEnd,index) in item.airClientVOS"
                      :key="index"
                      style="height: 50%;width:50%"
                    >
                      <div class="icon"></div>
                      <div class="title-box">
                        <div>
                          <div>温度：</div>
                          <div>{{airEnd.wd}}℃</div>
                        </div>
                        <div>
                          <div>风速：</div>
                          <div>{{airEnd.fs}}m/s</div>
                        </div>
                        <div>
                          <div>模式：</div>
                          <div>{{airEnd.ms}}</div>
                        </div>
                        <div>
                          <div>开关量</div>
                          <div>{{airEnd.kgl}}</div>
                        </div>
                        <div>
                          <div>故障信号</div>
                          <div>{{airEnd.gzxh}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="right">空调末端</div>
                </div>
              </div>
            </div>
            <img v-if="!systemArr || systemArr.length===0" class="no-data-img" src="../../../../assets/img/zwsj.png" />
          </div>
        </div>
      </div>
    </i-pageBody>
  </div>
</template>

<script>
import echart from "echarts";
import { getIesmefcacInfo, powergraph, loadAirHost } from "@/api/scada";

export default {
  name: "test",
  props: {},
  data() {
    return {
      systemData: [
        {
          url: require("../../../../assets/img/centerAir/4.png"),
          name: "用电负荷功率(千瓦）",
          value: 0
        },
        {
          url: require("../../../../assets/img/centerAir/5.png"),
          name: "今日用电量(千瓦时）",
          value: 0
        },
        {
          url: require("../../../../assets/img/centerAir/6.png"),
          name: "今日空调制冷量(千瓦时）",
          value: 0
        }
      ],
      systemArr: [],
      airEndItemArr: [{}, {}, {}, {}],
      option: {
        textStyle: {
          fontWeight: 400,
          fontSize: 14,
          color: "#666"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          textStyle: {
            fontWeight: 400,
            fontSize: 14,
            color: "#666"
          },
          icon: "circle",
          selectedMode: false,
          right: "5%"
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "5%",
          top: "14%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#E8E8E8",
              width: 1
            }
          }
        },

        yAxis: {
          name: "单位(kW)",
          nameTextStyle: {
            fontWeight: 400,
            fontSize: 14,
            color: "#666"
          },
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#E8E8E8"
            }
          }
        },
        series: [
          {
            name: "总电负荷功率曲线",
            showSymbol: false,
            data: [],
            type: "line",
            itemStyle: {
              color: "#0893FD"
            },
            smooth: true
          }
        ]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    //概况
    getIesmefcacInfo().then(res => {
      let result = res.result;
      if (res.code === 200) {
        this.systemData[0].value = result.loadTotal;
        this.systemData[1].value = result.elecTotal;
        this.systemData[2].value = result.clodTotal;
      }
    });
    let echartBox = document.querySelector("#centerAirEchart");
    let myCahrt = echart.init(echartBox);

    //功率曲线
    powergraph().then(res => {
      if (res.code === 200) {
        let data = res.result;
        this.option.xAxis.data = data.map(item => item.time);
        this.option.series[0].data = data.map(item => +item.power);
        myCahrt.setOption(this.option, true);
      }
    });
    //中央空调系统图
    loadAirHost().then(res => {
      if (res.code === 200) {
        let result = res.result;
        this.systemArr = result.airHostVOS;
      }
    });
  },
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="scss">
.bg-style {
  width: 100%;
  height: 100%;
}

.container-title {
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .icon {
    margin-right: 10px;
    width: 4px;
    height: 16px;
    background-color: #0893fd;
  }
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .part-common {
    height: 353px;

    .container-content {
      height: 236px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      margin-top: 30px;
      margin-left: 14px;
      .content-item {
        height: 60px;
        display: flex;
        justify-content: flex-start;
        .item-icon {
          height: 60px;
          width: 60px;
          margin-right: 11px;
        }
        .item-describe {
          display: flex;
          flex-direction: column;
          align-items: left;
          justify-content: space-between;
          height: 60px;

          > div:first-child {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
          }
          > div:last-child {
            font-size: 24px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }

  .air-system {
    height: 635px;
    position: relative;
    .legend {
      position: absolute;
      top: 30px;
      right: 80px;
      > div {
        display: flex;
        align-items: center;
        height: 50px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        > div {
          margin-left: 8px;
        }
      }
    }
    .no-data-img {
      position: absolute;
      width:190px;
      top:60px;
      left:50%;
      transform: translateX(-50%);
    }
    .system-box {
      width: calc(100% - 100px);
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      color: #999999;


      .box-item {
        width: 457px;
        .air-pipe {
          height: 280px;
          padding: 11px 0 8px 0;
          width: 100%;
          .icon {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            margin-left: 178px;
            background: url("~@/assets/img/centerAir/3.png") center no-repeat;
          }
          .direction {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .left {
              width: 156px;
              height: 195px;
              margin-left: 44px;
              background: #f7f7f7;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 10px;

              > div {
                display: flex;
                > div:first-child {
                  width: 85px;
                }
                > div:last-child {
                  color:#46a3f7;
                }
              }
            }
            .right {
              height: 195px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              > div:first-child {
                width: 15px;
                height: 72px;
              }
              > div:last-child {
                width: 156px;
                height: 87px;
                background: #f7f7f7;
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                > div {
                  display: flex;
                  justify-content: flex-start;
                  > div:first-child {
                    width: 50px;
                  }
                  > div:last-child {
                    text-align: left;
                    color:#46a3f7;
                  }
                }
              }
            }
          }
        }
        .air-end {
          height: 314px;
          width: 100%;
          background: url(~@/assets/img/centerAir/7.png) no-repeat center / contain;
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
            flex: 1;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-items: center;
            > div {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .icon {
              width: 50px;
              height: 50%;
              margin-right: 5px;
              background: url(~@/assets/img/centerAir/1.png) no-repeat center /
                contain;
            }
            .title-box {
              width: 124px;
              height: 140px;
              background: #f7f7f7;
              color: #666666;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 10px;
              > div {
                display: flex;
                > div:first-child {
                  width: 72px;
                }
                > div:last-child {
                 color:#91d66e;
                }
              }
            }
          }
          .right {
            margin-left: 25px;
            margin-right: 16px;
            width: 15px;
            transform: translateY(115px);
            color: #999;
          }
        }
      }
    }
  }
}
</style>
